
import React from 'react';
// import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import '../../index.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import axios from '../../axios/axios'

import { Form, Input, InputNumber, Button, Modal } from 'antd';
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 8,
    },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
    required: '${label}不能为空!',
    types: {
        email: '${label}格式不正确!',
        number: '${label}格式不正确!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};
/* eslint-enable no-template-curly-in-string */



export default class Register extends React.Component {
    constructor(props) {
        super(props);
        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.finishSubmit = this.finishSubmit.bind(this);
        this.state = {
            name: '',
            password: '',
            email: ''
        }
    }

    onFinish = (values) => {
        console.log(values);
        alert("注册成功");
    };

    handleUsernameChange(e) {
        let name = this.state.name;
        name = e.target.value;
        this.setState({
            name: name
        });
    }

    handleEmailChange(e) {
        let email = this.state.email;
        email = e.target.value;
        this.setState({
            email: email
        });
    }

    handlePasswordChange(e) {
        let password = this.state.password;
        password = e.target.value;
        this.setState({
            password: password
        });
    }

    finishSubmit() {
        let _this = this;
        let value = this.state;
        console.log(value);
        axios.post('/register', value)
            .then(function (response) {
                    if(response.data.success === true){
                        alert("注册成功");
                        _this.props.history.push('/') ;
                    }
                    else {
                        alert("该用户名已存在");
                    }
                                       

            })
    }

    render() {
        return (
            <Form {...layout} name="nest-messages" onFinish={this.finishSubmit} validateMessages={validateMessages}
                style={{ marginTop: '10%' }}>
                <Form.Item
                    name={['user', 'name']}
                    label="用户名"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input onChange={this.handleUsernameChange} />
                </Form.Item>
                <Form.Item
                    name={['user', 'password']}
                    label="密码"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input onChange={this.handlePasswordChange} />
                </Form.Item>
                <Form.Item
                    name={['user', 'email']}
                    label="邮箱"
                    rules={[
                        {
                            required: true,
                            type: 'email',
                        },
                    ]}
                >
                    <Input onChange={this.handleEmailChange} />
                </Form.Item>


                <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                    {<Button type="primary" htmlType="submit">
                        注册
                    </Button>}

                </Form.Item>

            </Form>

        );
    }
}



